<template>
  <div class="view-wrapper">
    <!-- <div style="margin-bottom: 14px">
       <el-button type="primary" @click="handleBig">大屏监控</el-button>
    </div> -->
    <div class="head_index" v-loading="loading2">
    <!-- <div class="head" > -->
        <div class="head-ul">
            <div class="head-li"  >
                  <div class="h-top">
                      <div class="h-word">上链报备商家总数(家)</div>
                      <el-tooltip  content="平台报备商家" placement="top">
                        <img class="h-img" src="./image/question01.png" alt="" />
                    </el-tooltip>
                  </div>
                <div class="h-bottom">{{merchantInfo.merchantTotal}}</div>
            </div>
            <div class="head-li"  >
                  <div class="h-top">
                      <div class="h-word">参与承保商家总数(家)</div>
                      <el-tooltip  content="平台开通承保商家" placement="top">
                        <img class="h-img" src="./image/question01.png" alt="" />
                    </el-tooltip>
                  </div>
                <div class="h-bottom">{{merchantInfo.insuranceMerchantTotal}}</div>
            </div>
            <div class="head-li"  >
                  <div class="h-top">
                      <div class="h-word">可参保发卡总数(种)</div>
                      <el-tooltip  content="商家可参保卡种类数量" placement="top">
                        <img class="h-img" src="./image/question01.png" alt="" />
                    </el-tooltip>
                  </div>
                <div class="h-bottom">{{merchantInfo.insuranceCardTotal}}</div>
            </div>
            <div class="head-li"  >
                <div class="h-top">
                    <div class="h-word">累计使用平台(人)</div>
                    <el-tooltip  content="使用平台人数" placement="top">
                      <img class="h-img" src="./image/question01.png" alt="" />
                  </el-tooltip>
                </div>
              <div class="h-bottom">{{merchantInfo.userTotal}}</div>
            </div>
        </div>

         <div class="head-ul">
            <div class="head-li"  >
                  <div class="h-top">
                      <div class="h-word">累计参保卡(张)</div>
                      <el-tooltip  content="消费者参保的卡数量" placement="top">
                        <img class="h-img" src="./image/question01.png" alt="" />
                    </el-tooltip>
                  </div>
                <div class="h-bottom">{{merchantInfo.alreadyInsuranceCardTotal}}</div>
            </div>
            <div class="head-li"  >
                  <div class="h-top">
                      <div class="h-word">商家保额总量(万元)</div>
                      <el-tooltip  content="未失效商家配置的保额总量" placement="top">
                        <img class="h-img" src="./image/question01.png" alt="" />
                    </el-tooltip>
                  </div>
                <div class="h-bottom">{{merchantInfo.insuranceMerchantMoneyTotal}}</div>
            </div>
            <div class="head-li"  >
                  <div class="h-top">
                      <div class="h-word">累计承保金额(元)</div>
                      <el-tooltip  content="消费者累计购卡承保的金额" placement="top">
                        <img class="h-img" src="./image/question01.png" alt="" />
                    </el-tooltip>
                  </div>
                <div class="h-bottom">{{merchantInfo.useInsuranceMerchantMoneyTotal}}</div>
            </div>
            <div class="head-li"  >
                <div class="h-top">
                    <div class="h-word">剩余保额(元)</div>
                    <el-tooltip  content="各商家剩余可用的保额总额" placement="top">
                      <img class="h-img" src="./image/question01.png" alt="" />
                  </el-tooltip>
                </div>
              <div class="h-bottom">{{merchantInfo.usableInsuranceMerchantMoneyTotal}}</div>
            </div>
        </div>
     
    </div>
    <div class="Card_sales">
      <div class="sales_bottom">
        <div class="sales_bottom_l">
          <div class="sales_bottom_head">上链报备商家类型分布</div>
          <div v-loading="loading" id="ichart" style="width: 100%; height: 400px" />
          <!-- <div  id="ichart" style="width: 100%; height: 400px" /> -->
        </div>
        <div class="sales_bottom_r">
          <div class="sales_bottom_head">快捷入口</div>
          <div class="large_screen_box">
            <div class="large_screen_img_box">
              <div class="preview_txt">预 览 图</div>
              <img src="./image/large_screen.png" alt="">
            </div>
            <el-button type="primary" @click="handleBig">进入数据大屏 ></el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  // components
  // import echarts from "echarts";
  import * as echarts from 'echarts';
  import {
    merchantTotal,
    screenMerchantList,
    
  } from "@/api/index";
  import { getToken } from "@/utils/auth";
  export default {
    name: "Home",
    components: {
    },
    data() {
      return {
        loading: false,
        loading2: false,
        date: [],
        merchantInfo: {},
        dateXlist: [], //X轴
        countYlist: [], //Y轴
      };
    },
    created() {
      this.getmerchantTotalt();
      // this.getbacklogLsData();
      // this.getwarningdayData();
      this.getsaleCardStatics();
      // setTimeout(() => {
      //   this.initChart();
      // }, 500);
    },
    mounted() {},
    methods: {
      getmerchantTotalt() {
        //入驻商家统计查询
        this.loading2 = true;
        merchantTotal().then((res) => {
          this.merchantInfo = res.result;
          this.loading2 = false;
        });
      },

      getsaleCardStatics() {
        //柱状图数据
        const params = {

        };
        this.loading = true;
        screenMerchantList(params).then((res) => {
          console.log('柱状图数据', res)
          this.dateXlist = res.result.map((item) => {
            return item.name
          })
          this.countYlist = res.result.map((item) => {
            return item.value
          })
          setTimeout(() => {
            this.initChart()
          }, 100)
          this.loading = false;
        });
      },
      initChart() {
        var myChart = echarts.init(document.getElementById("ichart"));

        myChart.setOption({
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "line",
              lineStyle: {
                opacity: 0,
              },
            },
          },
          legend: {
            show: false,
          },
          grid: {
            left: "5%",
            right: "5%",
            bottom: "15%",
            top: "10%",
            containLabel: true,
            z: 22,
          },
          xAxis: {
            type: "category",
            name:'商家行业类别('+ this.dateXlist.length +'个类别)',
            nameLocation: "middle",
            data: this.dateXlist,
            nameTextStyle: {
                color: '#4B5466',     // 坐标轴名称的颜色
                fontWeight: '400',    // 文字字体的粗细（'normal'，无样式；'bold'，加粗；'bolder'，加粗的基础上再加粗；'lighter'，变细；数字定义粗细也可以，取值范围100至700）
                fontSize: '14',    // 文字字体大小
                align: 'center',     // 文字水平对齐方式，默认自动（'left'，'center'，'right'）
                padding:[20,0,0,0]
            },
            axisLabel: { //X轴文字颜色
              show: true,
              textStyle: {
                color: "#576276",
              },
            },
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              lineStyle: {
                type: "solid",
                color: "#CDD3DF", //左边线的颜色
                width: "1", //坐标线的宽度
              },
            },
          },
          yAxis: {
            nameTextStyle: { //Y轴名称的文字样式
              color: '#4B5466',
            },
            name: "商家数",
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "#CDD3DF",
              },
            },
            axisLabel: { //y轴文字颜色
              show: true,
              textStyle: {
                color: "#9198A5",
              },
            },
            axisLine: {
              lineStyle: {
                type: "dashed",
                color: "#CDD3DF", //左边线的颜色
                width: "1", //坐标线的宽度
              },
            },
          },
          series: [{
            data: this.countYlist,
            type: "bar",
            barWidth: "35",
            itemStyle: {
              emphasis: {
              //  label:{
              //     show: true, //开启显示
              //     position: 'top', //在上方显示
              //  },
                // 移入当前的柱状图时改变颜色
               color: '#397DFF',
              },
              //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
              normal: {
                //柱形图圆角，初始化效果
                barBorderRadius: [4, 4, 0, 0],
                color: '#6699FE',
              },
            },
          }, ],
        });
      },
      //数据大屏
      handleBig() {
        console.log("process.env.VUE_APP_BIG_API", getToken());
        window.location = process.env.VUE_APP_BIG_API + "?token=" + getToken();
        // window.location = 'http://192.168.0.105:8080/' + "?token=" + getToken();
      },
    },
  };

</script>
<style lang="scss">
  .el-card-title {
    font-size: 20px;
  }

</style>
<style lang="scss" scoped>
  div {
    box-sizing: border-box;
  }

  .head_index {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    
  }
  .head-ul{
    // width: 800px;
    width: 49%;
    // min-width: 750px;
    padding: 0 18px;
    box-sizing: border-box;
    height: 164px;
    background: #FFFFFF;
    box-shadow: 0px 0px 25px #E2E6F3;
    border-radius: 14px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 41px;
  }
  .head-li{
     width: calc(100%/4);
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     font-size: 15px;
  }
  .h-top{
    display: flex;
    align-items: center;
    color: #4B5466;
  }
  .h-img{
    width: 16px;
    height: 16px;
    margin-left: 5px;
  }
  .h-bottom{
    margin-top: 12px;
    font-weight: 600;
    font-size: 32px;
    line-height: 38px;
    // text-align: center;
    color: #FF614C;
  }

  
@media (max-width: 1600px){
    .head-ul{
      width: 100%;
    }
}

  .Card_sales {
    // background-color: #fff;
    // box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.06);
    margin-top: 0px;
  }

  .sales_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
  }

  .sales_head_L {
    width: 168px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  .sales_head_Lbox {
    font-weight: bold;
    width: 100px;
    padding: 16px 0;
    font-size: 16px;
    color: #000000;
    border-bottom: 1px solid #1890ff;
  }

  .sales_head_R {
    display: flex;
    align-items: center;
    padding-right: 168px;
  }

  .sales_head_Rone {
    display: flex;
    align-items: center;
  }

  .timetxt {
    font-size: 14px;
    margin-right: 24px;
    cursor: pointer;
  }

  .tiemcolor {
    color: #1890ff;
  }

  .sales_bottom {
    display: flex;
    justify-content: space-between;
  }

  .sales_bottom_l {
    width: 66%;
    background: #ffffff;
    box-shadow: 0px 0px 25px #e2e6f3;
    border-radius: 14px;
    margin-right: 2%;
  }

  .sales_bottom_head {
    background: #f6f8fc;
    border-radius: 14px 14px 0px 0px;
    font-size: 16px;
    color: #4b5466;
    padding: 24px 17px;
    font-weight: bold;
  }

  .sales_bottom_r {
    // flex: 1;
    width: 527px;
    background: #ffffff;
    box-shadow: 0px 0px 25px #e2e6f3;
    border-radius: 14px;
  }

  .rank_head {
    font-size: 14px;
  }

  // .rankBox{
  //   display: flex;
  //   justify-content: center;
  //   height: 100%;
  // }
  .rankBox p {
    font-size: 14px;
    color: #909399;
    padding-top: 100px;
    text-align: center;
  }

  .ellipseHide {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .large_screen_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 40px;
  }

  .large_screen_img_box {
    border-radius: 10px;
    // width: 100%;
    height: 256px;
    position: relative;
    margin-bottom: 30px;
  }

  .large_screen_img_box img {
    // width: 100%;
    height: 256px;
  }

  .preview_txt {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #ffffff;
    z-index: 3;
  }

  .none_obx {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #9198A5;
  }

  .none_obx img {
    width: 108px;
    height: 108px;
  }

</style>
